<template>
	<view class="conten">
		<!-- 头像名称 -->
		<view class="item">
			<view class="item-img"></view>
			<view class="item-name">爱大叔叔茶的大明星</view>
		</view>
		<!-- 会员中心 -->
		<view class="member">
			<view class="member-centre">
				<view class="member-centent">
					<sapn>会员中心</sapn>
					<view class="member-img">
						<img src="/img/右箭头.png" alt="" />
					</view>
				</view>
			</view>

			<view class="member-text">
				<span>见习萌新</span>去下单开启会员之旅
			</view>
			<view class="member-Coupons">
				<view class="member-ticket">
					图片
				</view>
				<viwe class="member-ticket member-tickets">
					图片
				</viwe>
			</view>
		</view>
		<!-- 流浪补给站 -->
		<view class="supply">
			<view class="supply-item">
				<view class="supply-text">流浪补给站</view>
				<view class="supply-grain">葫芦助力10g粮食</view>
				<view class="supply-participate">立即参与</view>
			</view>
			<view class="supply-img">
				图片
			</view>
		</view>
		<!-- 优惠卷 会员兑换 -->
		<view class="Coupons-item">
			<view class="Coupons-centen">
				<view class="Coupons-centens">
					<view class="Coupons-text">优惠卷</view>
					<view class="Coupons-num">2张</view>
				</view>
				<view class="Coupons-imgs">
					图片
				</view>
			</view>
			<view class="Coupons-centen Coupons-member">
				<view class="Coupons-centens">
					<view class="Coupons-text">会员兑换</view>
					<view class="Coupons-num">**</view>
				</view>
				<view class="Coupons-imgs">
					图片
				</view>
			</view>
		</view>

		<!-- 我的功能 -->
		<view class="function">
			<view class="my-function">我的功能</view>

			<view class="function-button">

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">积分乐园</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">地址管理</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">券码兑换</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">福利群</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">学子卡</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">送心意</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">联系客服</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">古茗故事</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">超值券包</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">实物中奖记录</view>
				</view>

				<view class="function-centen">
					<view class="function-imgs">图片</view>
					<view class="function-wz">口味收藏</view>
				</view>
			</view>

		</view>

		<view class="tea">
			古茗
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				disabled: false,
				value1: 0,
			}
		},
		onLoad() {
			console.log('页面加载完成');
		},
		methods: {
			handleTabClick(e) {
				try {
					console.log('点击了标签栏', e);
					// 在这里可以添加更多的逻辑处理
				} catch (error) {
					console.error('标签栏点击处理时出错:', error);
				}
			},
			aaa(e) {
				uni.navigateTo({
					url: '/pages/edit-pen/edit-pen'
				})
			},
			change1(e) {
				try {
					console.log('标签栏发生了变化', e);
					this.value1 = e.index;
				} catch (error) {
					console.error('标签栏变化处理时出错:', error);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.conten {
		width: 100%;
		height: 1000px;
		background-color: #f5f5f5;
	}

	// 头像名称
	.item {
		width: 100%;
		height: 50px;
		// background-color: #00FF00;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.item-img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #9999cc;

	}

	.item-name {
		width: 145px;
		height: 50px;
		line-height: 50px;

	}

	// 会员中心
	.member {
		width: 100%;
		height: 200px;

		background-color: #ffffe0;
		border-radius: 10px;
	}

	.member-centre {
		width: 100%;
		height: 24px;
		margin-top: 10px;
		// background-color: #00ffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: relative;
	}

	.member-centent {
		width: 90px;
		height: 24px;
		background-color: #ffd700;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		right: 0px;

	}

	.member-img {
		width: 24px;
		height: 24px;
	}

	.member-img img {
		width: 100%;
		height: 100%;
	}

	.member-text {
		width: 100%;
		height: 60px;
		// background-color: #8b0000;
		margin-top: 10px;
	}

	.member-text span {
		font-size: 30px;
		margin-left: 10px;
	}

	.member-Coupons {}

	// 流浪补给站
	.supply {
		width: 100%;
		height: 100px;

		background-color: #ffd700;
		margin-top: 10px;
		border-radius: 10px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
	}

	.supply-item {
		width: 60%;
		height: 90px;
		// background-color: #00ffff;
		margin-top: 5px;
		margin-left: 10px;
	}

	.supply-text {
		width: 100%;
		height: 40px;
		font-size: 30px;
	}

	.supply-grain {
		width: 100%;
		height: 30px;
		font-size: 20px;
	}

	.supply-participate {
		width: 40%;
		height: 20px;
		background-color: #ff7f50;
		font-size: 10px;
		border-radius: 10px;
		text-align: center;
		line-height: 20px;
		color: #ffffff;
	}

	.supply-img {
		width: 40%;
		height: 100px;
		background-color: #9999cc;
	}

	// 优惠卷 会员兑换
	.Coupons-item {
		width: 100%;
		height: 100px;
		background-color: #ff7f50;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}

	.Coupons-centen {
		width: 49%;
		height: 100px;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
	}

	.Coupons-centens {
		width: 50%;
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		margin-left: 10px;
	}

	.Coupons-imgs {
		width: 50%;
	}

	// 我的功能
	.function {
		width: 100%;
		height: 300px;
		background-color: #ffffff;
		margin-top: 10px;
	}

	.my-function {
		width: 100%;
		height: 24px;
	}

	.function-button {
		width: 98%;
		height: 260px;
		background-color: #ffffff;
		margin: 0 auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
	}

	.function-centen {
		width: 24%;
		height: 80px;
		background-color: #ffd700;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-left: 3px;
	}

	.function-imgs {
		width: 100%;
		height: 60px;
		background-color: #ffffe0;
	}

	.function-wz {
		width: 100%;
		height: 20px;
		text-align: center;
		font-size: 13px;
	}

	.tea {
		width: 100%;
		height: 100px;
		color: #666666;
		font-size: 40px;
		text-align: center;
		line-height: 100px;
	}
</style>